import 'package:flutter/material.dart';

class HelpPage extends StatefulWidget {
  @override
  _HelpPageState createState() => _HelpPageState();
}

class _HelpPageState extends State<HelpPage> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 400.0,
      child: Padding(
        padding: const EdgeInsets.only(
          left: 15.0,
          right: 15.0,
        ),
        child: SingleChildScrollView(
          physics: const BouncingScrollPhysics(
            parent: AlwaysScrollableScrollPhysics(),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                padding: const EdgeInsets.all(15.0),
                margin: const EdgeInsets.symmetric(vertical: 15.0),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.0),
                  gradient: const LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      Color(0xff1CDCE8),
                      Color(0xffBB77ED),
                    ],
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      '玩法介绍',
                      style: TextStyle(
                        fontSize: 22.0,
                        color: Colors.white,
                      ),
                    ),
                    const Divider(
                      color: Colors.white,
                      thickness: 2.0,
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '单击数字图块以移动它们。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '按 1-15 的升序调整图块以赢得游戏。\n参见图片以供参考。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 5.0,
                    ),
                    Image.network(
                      'https://res.cloudinary.com/websiteimages/image/upload/v1645607604/Website%20Pics/Capture_kw7o4o.png',
                      width: 400,
                      height: 200,
                    ),
                    const SizedBox(
                      height: 5.0,
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '一旦你移动第一步，你的时间就会开始计时。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '您所有的有效动作都将被计算并在屏幕上显示给您。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '单击 打乱 开始新游戏。 请注意，您当前的所有进度都将丢失。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                    ListTile(
                      iconColor: Colors.white,
                      textColor: Colors.white,
                      leading: const Icon(Icons.fiber_manual_record),
                      title: Text(
                        '与您的朋友和家人一起享受游戏带来的快乐吧。',
                        style: TextStyle(
                          fontSize: 14.0,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
